<template>
	<view>
		<image class="bg" mode="widthFix" src="@/static/imgs/head2.png"></image>
		<view class="cantainer">
			<view class="status_bar"><!-- 这里是状态栏 --></view>
			<h3 class="title">硬件信息</h3>
			<uni-search-bar v-model="deviceName" style="padding: 10px 0;" radius="20" @confirm="search"
			 @cancel="clear" cancelText="重置" placeholder="请输入硬件名称"></uni-search-bar>

			<view class="whiteLine mtb20" v-for="(i, idx) in list" :key="idx">
				<view class="flexR between p10">
					<view>
						<image style="width: 15px;" mode="widthFix" src="@/static/imgs/icon-tip.png"></image>
						<span class="i">{{ i.name+'('+i.deviceSensibility.deviceNo+')' }}</span>
					</view>
					<view @click="prePage('test')">
						<uni-icons type="eye" color="#11A8A3" size="20"></uni-icons>
						<span style="color: #11A8A3;">实时预览</span>
					</view>
				</view>
				<view class="line"></view>

				<view class="flexR between p10 bto">
					<view>
						<view>
							<image style="width: 15px;" mode="widthFix" src="@/static/imgs/icon1.png"></image>
							<span class="text">温度：{{ i.deviceSensibility.temperature }}℃</span>
						</view>
						<view>
							<image style="width: 15px;" mode="widthFix" src="@/static/imgs/icon2.png"></image>
							<span class="text">湿度：{{ i.deviceSensibility.humidity }}%</span>
						</view>
					</view>
					<span class="flow"></span>
					<view class="bBox flexR between">
						<!-- <span class="flow"></span> -->
						<button class="btn" plain="true" @click="detail(i)">查看</button>
						<button class="btn" plain="true" @click="edit(i)">修改</button>
					</view>
				</view>
				<view style="padding: 0 10px 10px;">
					<image style="width: 15px; margin-right: 5px;" mode="widthFix" src="@/static/imgs/icon3.png"></image>
					<span class="text kk">空气颗粒度</span>
					<span class="text kk">空气颗粒度0.3μm：{{ i.deviceSensibility.particle3 }}个/L</span>
					<span class="text kk">空气颗粒度0.5μm：{{ i.deviceSensibility.particle5 }}个/L</span>
					<span class="text kk">空气颗粒度1.0μm：{{ i.deviceSensibility.particle10 }}个/L</span>
					<span class="text kk">空气颗粒度2.5μm：{{ i.deviceSensibility.particle25 }}个/L</span>
					<span class="text kk">空气颗粒度5.0μm：{{ i.deviceSensibility.particle50 }}个/L</span>
					<span class="text kk">空气颗粒度10.0μm：{{ i.deviceSensibility.particle100 }}个/L</span>
				</view>
			</view>
			<view v-if="!list.length" class="kong">暂无数据</view>
			<view v-if="last && list.length" class="last">已经到底了</view>
		</view>
		<view></view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			last: false,
			deviceName: '',
			page: 1,
			list: [],
			bannerList: [{
				name: '硬件信息',
				icon: require('@/static/imgs/banner3.png')
			}, {
				name: '视频',
				icon: require('@/static/imgs/banner2.png')
			}, {
				name: '设备监测数据',
				icon: require('@/static/imgs/banner1.png')
			},]
		};
	},
	onShow() {
		this.list = [];
		this.last = false;
		this.page = 1;
		this.getList();
	},
	onReachBottom() {
		setTimeout(()=>this.loadmore(), 1000)
	},
	methods: {
		clear() {
			this.list = [];
			this.page = 1;
			this.deviceName = '';
			this.getList();
		},
		search() {
			this.page = 1;
			this.list = [];
			this.getList();
		},
		loadmore() {
			if(this.last) return;
			this.page += 1;
			this.getList();
		},
		prePage(v) {
			uni.navigateTo({
				url: `/pages/preview?obj=${v}`
			});
		},
		getList() {
			let url = `/senor/device/applist?&pageNum=${this.page}&pageSize=10&name=${this.deviceName}`;
			this.$axios({
				method: 'get',
				url,
			}).then(res=>{
				this.list = this.list.concat(res.rows);
				this.list.map(i=>{
					if(i.deviceSensibility==null) {
						i.deviceSensibility = {
							temperature: '--',
							humidity: '--'
						}
					} else {
						i.deviceSensibility.humidity = parseFloat(i.deviceSensibility.humidity*1/10).toFixed(2)
						i.deviceSensibility.temperature = parseFloat(i.deviceSensibility.temperature*1/10).toFixed(2)
					}
				})
				if(this.list.length>=res.total) {
					this.last = true;
				}
			})
		},
		detail(obj) {
			uni.navigateTo({
				url: `/pages/detail?info=${JSON.stringify(obj)}`
			});
		},
		edit(obj) {
			uni.navigateTo({
				url: `/pages/edit?info=${JSON.stringify(obj)}`
			});
		}

	}
}
</script>

<style lang="scss" scoped>
.text {
	color: #808080;
}

.kk {
	display: inline-block;
	width: 50%;
}

.bto {
	padding-bottom: 0;
	align-items: flex-start;
}

.bBox {
	width: 120px;
}

.title {
	margin: 20px 0;
	font-weight: bold;
	font-size: 20px;
}

.mr20 {
	margin-right: 20px;
}

.i {
	margin: 0 10px;
}

.btn {
	margin: 0;
	width: 56px;
	height: 26px;
	font-size: 12px;
	line-height: 26px;
	border-radius: 24px;
	color: #11A8A3 !important;
	border-color: #11A8A3 !important;
}


.bg {
	width: 100%;
	position: absolute;
	top: 0;
	z-index: 0;
}
</style>